<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>购物系统-登录页面</title>
    <link th:href="@{webjars/bootstrap/5.1.3/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{css/ms-common.css}" rel="stylesheet">
    <link th:href="@{css/common/ms-common.css}" rel="stylesheet">
</head>
<body>
<nav th:replace="common/topbar.html"></nav>
<div th:replace="common/ms-toast.html"></div>

<div class="container">
    <div class="col-md-3">

    </div>

    <div class="col-md-6 mx-auto shadow p-5 mt-2">
        <h1 class="text-center placeholder">找回密码</h1>
        <form id="form-retrieve">
            <ul class="ms-ul list-unstyled">
                <!-- 1 用户邮箱 -->
                <li>
                    <div class="form-floating">
                        <input name="email" type="text" class="form-control placeholder" id="form-email" placeholder="请输入邮箱">
                        <label for="form-email">邮箱</label>
                        <div class="valid-feedback">
                            提示: 邮箱格式正确
                        </div>
                        <div class="invalid-feedback">
                            提示: 邮箱不符合规则
                        </div>
                    </div>
                </li>
                <!-- 2 用户密码 -->
                <li>
                    <div class="form-floating">
                        <input id="form-password" name="password" type="password" class="form-control placeholder" placeholder="请输入新的密码">
                        <label for="form-password">密码</label>
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div class="invalid-feedback">
                            提示: 密码不能为空
                        </div>
                    </div>
                </li>
                <!-- 3 用户密码 -->
                <li>
                    <div class="form-floating">
                        <input name="password-second" type="password" class="form-control placeholder" id="form-password-second" placeholder="请再次输入新的密码">
                        <label for="form-password-second">再次确认密码</label>
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div class="invalid-feedback">
                            提示: 密码不能为空
                        </div>
                    </div>
                </li>
                <!-- 6 用户验证码 -->
                <li class="row">
                    <div class="col-md-4 text-end">
                        <button id="btnSendEmailCode" type="button" class="btn btn-info mt-2 placeholder" onclick="sendEmailCode('btnSendEmailCode', '#form-retrieve')">发送验证码</button>
                    </div>
                    <div class="form-floating col-md-8">
                        <input name="emailCode" type="text" class="form-control w-50 placeholder" id="form-email-code" placeholder="请输入验证码">
                        <label for="form-email-code">验证码</label>
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div class="invalid-feedback">
                            提示: 密码不能为空
                        </div>
                    </div>
                </li>
                <!-- 找回按钮 -->
                <li class="text-center">
                    <button id="btn-retrieve" class="ms-keydown_enter btn btn-primary w-50 placeholder" type="button"
                            onclick="retrieveUser('btn-retrieve')">
                        找回密码
                    </button>
                </li>
            </ul>
        </form>
    </div>
    <div class="col-md-3"></div>
</div>
<!-- 引入第三方 JS 脚本文件 -->
<script th:src="@{webjars/jquery/3.3.1/jquery.js}" type="text/javascript"></script>
<script th:src="@{webjars/bootstrap/5.1.3/js/bootstrap.bundle.js}" type="text/javascript"></script>
<!-- 引入自定义的 JS 脚本文件 -->
<script th:src="@{/js/common/ms-config.js}" type="text/javascript"></script>
<script th:src="@{/js/utils/ms-util-ajax.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-toast.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-random.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-btn.js}" type="text/javascript"></script>
<script th:src="@{/js/user/ms-retrieve.js}" type="text/javascript"></script>

</body>
</html>